<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试结束</title>
</head>
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #282c34;
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #fff;
}

.timer-container {
  text-align: center;
  background: rgba(0, 0, 0, 0.2);
  padding: 20px;
  border-radius: 8px;
}

h1 {
  color: #61dafb;
  margin-bottom: 20px;
}

input[type="datetime-local"] {
  padding: 10px;
  margin-bottom: 20px;
  border: none;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  font-size: 16px;
  width: 200px;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #61dafb;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #39a2db;
}

.countdown {
  font-size: 20px;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.countdown > div {
  margin: 0 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}
</style>
<body>
<div class="timer-container">
  <h1>距离考试结束</h1>
  <div id="countdown"><h2 id="gotime">00:00:00</h2></div>
</div>
</body>
</html>
<script>
    let countdown;
let countdownTime;
startTimer();
function startTimer() {
  function geturlsearch_main(){ 
    var queryString = window.location.search; 
    var valueAfterQuestionMark = queryString.substring(1);
    return valueAfterQuestionMark;
}
  const input = geturlsearch_main();
  countdownTime = new Date(input).getTime();
  
  clearInterval(countdown);
  countdown = setInterval(function() {
    const now = new Date().getTime();
    const distance = countdownTime - now;
    
    if (distance < 0) {
      clearInterval(countdown);
      document.getElementById('gotime').innerHTML = "无效的时期";
      return;
    }
    
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    document.getElementById('gotime').innerHTML = `${padTime(hours)}:${padTime(minutes)}:${padTime(seconds)}`;
  }, 1000);
}

function padTime(time) {
  return time < 10 ? '0' + time : time;
}
</script>